<template>
 
    
    
  <div id="app">
    <h2>测试题</h2>
    
      <SubjectItem 
      
      :allNum="allNum"
      @submit="submitFn"
      
      ></SubjectItem>
       
    
    <div>
      <FlagItem :Text="Text"></FlagItem>
    </div>
  </div>
  
</template>

<script>
import SubjectItem from "./components/SubjectItem.vue";
import FlagItem from "./components/FlagItem.vue";
export default {
  components:{
    SubjectItem,
    FlagItem
  }
  ,data(){
        return{
          allNum:[],
          Text:[]

          
        
        } 
  }, created() {
      for (let i = 0; i < 5; i++ ){
        this.allNum.unshift(
        {
          num1: parseInt(Math.random() * 10 +1) ,  num2 :parseInt(Math.random() * 10 +1) 
        }
     )
      }

   for (let i = 0; i < 5; i++ ){
    this.Text.unshift({
       content:'未完成',
       textColor : 'undo'
    })

    
   }


  },
  methods:{
    submitFn(value,index){
         if ( !value[index]) return  alert('数值不能为空')
      if (value[index] === this.allNum[index].num1  + this.allNum[index].num2  ) {
        this.Text.splice(index , 1,{content:`回答正确`,textColor:'right'})
        
      }else if(  value[index] !== this.allNum[index].num1  + this.allNum[index].num2   ){

       
        this.Text.splice(index , 1,{content:`回答错误`,textColor:'error'})
         
      }
       
    }
  }
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>